<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sistema de Biblioteca Pessoal</title>
</head>
<body>
	<f:view>
		<h2 id="texto">Biblioteca Pessoal</h2>
		<p>Faça o seu login para acessar o sistema, ou realize o seu
			cadastro gratuitamente, clicando no link abaixo.</p>
			
		<h:outputText style="color: #FF0000" value="#{usuarioMB.mensagem}"
			rendered="#{usuarioMB.comMensagem}"></h:outputText>  
		<h:outputText style="color: #0000FF" value="#{usuarioMB.msgOk}"
			rendered="#{usuarioMB.comMsgOk}"></h:outputText>
			
		<h:form id="form">
Login: <h:inputText id="login" value="#{usuarioMB.login}" onfocus="return limpar();"
				required="true">
		<f:validateLength minimum="2" maximum="5"></f:validateLength> 
			</h:inputText>
			<br />
Senha: <h:inputSecret id="senha" value="#{usuarioMB.senha}"></h:inputSecret>
			<br/>
			<h:commandButton value="Efetuar Login" onclick="return validar();"
				action="#{usuarioMB.autenticar}" ></h:commandButton>
		</h:form>
		<hr />
		<h:form>
			<h:commandLink action="cadastroUsuario.jsp">
				<h:outputText  value="Efetue o seu cadastro no sistema!"></h:outputText>
			</h:commandLink>
		</h:form>

	</f:view>

	<script type="text/javascript">
		
		try {
		document.getElementById("form:login").value = "Digite o seu login...";
		} catch (err) {
			alert(err.message);
		}
		
		//limpar a caixa do login, quando o usuário clica
		function limpar() {
		if (document.getElementById("form:login").value != ''){
		document.getElementById("form:login").value = '';
		}
	}
		
		function validar(){			    
   			if (document.getElementById("form:login").value =="") {    
      		  alert('Preencha o campo login!');   
      		  return false;   			  
   			} 
   			if (document.getElementById("form:senha").value =="") {    
      		  alert('Preencha a senha!'); 
      		  return false;       			  
   			}
   			else {  
      		  return true;  
   			  }    
			
		}
		
		
	</script>
</body>
</html>